<script setup>
import { delSupplier, getKehuList } from "@/api/supplier.js";
import { onMounted, ref, computed } from "vue";
import confirm from "@/libs/confirm";
import { submitProject } from "@/api/project";
import { toast } from "@/hook/toast";
import { delay } from "@/utils";
import AddVue from "./add/index"

const projectlist = ref([]);
const loading = ref(true)
const addRef = ref(null)

const pagination = ref({
    page: 1,
    size: 15,
    total: 0
})
const isSearch = ref(false)

async function initData() {
    loading.value = true
    const { page } = pagination.value
    const params = { page, keyword: '', status: '', user_ids: '', is_my: '' }
    if (isSearch.value) {
        const { keyword, status } = formData.value
        params.keyword = keyword
        params.status = status
    }
    const resp = await getKehuList(params).catch(() => {
    });
    console.log(resp, '接口传参')


    await delay(300)
    const { code, data, msg } = resp;
    if (code !== 1) {
        loading.value = false
        return toast({ title: msg, type: 'error' });
    }
    const { data: list, current_page, total, per_page } = data
    projectlist.value = list;
    pagination.value = {
        total,
        size: per_page,
        page: current_page
    }
    loading.value = false
}

function pageChange(val) {
    pagination.value.page = val
    initData();
}

// 添加供应商
function addHandle() {
    visible.value = true
}
const visible = ref(false)

// 传值回来
function addSuccess() {
    resetForm()
}
function resetForm() {
    // 重置一下
    pagination.value.page = 1;
    projectlist.value = []
    // formRef.value.resetFields()
    initData();
}
// 编辑内容
function confirmEdit(row) {
    addRef.value?.editHandle(row)
}

onMounted(() => {
    initData();
});

async function confirmProject(id) {
    const resp = await delSupplier({ gongyingshang_id: id })
    const { code, msg } = resp
    toast({ title: msg, type: code === 1 ? 'success' : 'error' })
    if (code !== 1) return
    pagination.value.page = 1
    await initData()
}

function confirmHandle(row) {
    const { name, id } = row
    confirm({
        title: '删除提醒',
        message: `您确定删除 ${name} 吗?`,
        confirmBtnText: '确认删除',
        cancelBtnText: '取消',
    }).then(() => confirmProject(id)).catch(() => {
    })
}

const heightValue = ref(600)
const contentRef = ref(null)
onMounted(() => {
    const target = contentRef.value
    if (!target) return
    const { height } = target.getBoundingClientRect()
    heightValue.value = height
})
const formRef = ref(null)
const formData = ref({
    keyword: '',
    status: '',

})
const statusOption = computed(() => [
    {
        label: '已结算',
        value: 1
    },
    {
        label: '未结算',
        value: 0,
    }
])

// function searchHandle() {
//     isSearch.value = true
//     pagination.value.page = 1
//     initData()
// }

// function resetHandle() {
//     isSearch.value = false
//     formRef.value.resetFields()
//     pagination.value.page = 1
//     initData()
// }
</script>
<template>
    <div class="card_wrap business-manage flex column">
        <div>
            <el-button type="success" @click="addHandle">添加客户</el-button>
        </div>
        <!-- <div class="w-100">
      <el-row>
        <el-col>
          <el-form ref="formRef"
                   :model="formData"
                   inline
          >
            <el-form-item label="关键字" prop="keyword">
              <el-input type="text" v-model="formData.keyword" placeholder="请输入关键字"/>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="formData.status">
                <el-option v-for="(item,index) in statusOption" :key="index" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-space>
                <el-button type="primary" @click="searchHandle">搜索</el-button>
                <el-button type="danger" @click="resetHandle">重置</el-button>
              </el-space>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div> -->
        <div class="relative w-100 flex-1" style="margin-top: 24px;">
            <div class="absolute inset" ref="contentRef">
                <el-table :data="projectlist" style="width: 100%" :height="heightValue" border fit v-loading="loading">
                    <el-table-column fixed="left" prop="type_text" label="类型" />
                    <el-table-column prop="name" label="客户姓名" width="180" />
                    <el-table-column prop="mobile" label="手机号码" />
                    <el-table-column prop="wx" label="微信" />
                    <el-table-column prop="city_name" label="城市" />
                    <el-table-column prop="address" label="详细地址" />


                    <el-table-column prop="content" label="备注" />
                    <el-table-column label="操作" :fixed="'right'">
                        <template #default="{ row }">
                            <el-space>
                                <el-button type="success" plain size="small" @click="confirmEdit(row)">编辑</el-button>
                                <el-button type="danger" plain size="small" @click="confirmHandle(row)">删除</el-button>
                            </el-space>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="page w-100">
            <el-pagination layout="prev, pager, next" :total="pagination.total" class="mt-4" :page-size="pagination.size"
                :current_page="pagination.page" @current-change="pageChange" />
        </div>
        <div>
            <add-vue ref="addRef" v-model="visible" @add-success="addSuccess"></add-vue>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.business-manage {

    .page {
        display: flex;
        justify-content: flex-end;
        margin-top: 16px;
    }
}
</style>
